<style lang="less">
@import "./login1.less";
</style>

<template>
    <div class="login" @keydown.enter="handleSubmit">
        <div class="login-con">
          <div class="login-con-header">
            <div class="login-con-header-logo">
              <img alt="" class="logo" src="https://gw.alipayobjects.com/zos/rmsportal/NGCCBOENpgTXpBWUIPnI.svg" />
              <span class="login-con-title">Vue、Iview 模版</span>
            </div>
            <div class="login-con-desc">Ant Design 是西湖区最具影响力的 Web 设计规范</div>
          </div>
          <Form ref="loginForm" :model="form" :rules="rules">
              <FormItem prop="account">
                  <Input v-model="form.account" placeholder="请输入用户名" size="large">
                      <span slot="prepend">
                          <Icon :size="16" type="person"></Icon>
                      </span>
                  </Input>
              </FormItem>
              <FormItem prop="password">
                  <Input type="password" v-model="form.password" placeholder="请输入密码" size="large">
                      <span slot="prepend">
                          <Icon :size="14" type="locked"></Icon>
                      </span>
                  </Input>
              </FormItem>
              <FormItem>
                  <Button @click="handleSubmit" type="primary" long :loading="loading">{{text}}</Button>
              </FormItem>
          </Form>
          <p class="login-tip">输入任意用户名和密码即可</p>
        </div>
    </div>
</template>

<script>
import Cookies from "js-cookie";
import Avator from "@/assets/user.png";
import Util from '@/libs/util';
export default {
  data() {
    return {
      form: {
        account: "admin",
        password: "123456"
      },
      loading: false,
      rules: {
        account: [{ required: true, message: "账号不能为空", trigger: "blur" }],
        password: [{ required: true, message: "密码不能为空", trigger: "blur" }]
      },
      text: '登录'
    };
  },
  methods: {
    handleSubmit() {
      this.$refs.loginForm.validate(valid => {
        if (valid) {
          this.loading = true;
          this.$store.dispatch("DoLogin", this.form).then(response => {
            if (response) {
              const { data, httpCode } = response;
              if (httpCode == 200) {
                this.text = '正在跳转...'
                const { token, sysUser, hasPermissions = [] } = data;
                Cookies.set("loozb_token", token);
                localStorage.avatorPath = sysUser.avatar;
                localStorage.username = sysUser.username;
                localStorage.userId = sysUser.id;

                localStorage.permission = JSON.stringify(hasPermissions);
                this.$store.commit('SET_PERMISSION', hasPermissions)　　//设置权限信息

                //建立连接
                // Util.createSocket(sysUser.id)

                this.$store.commit('SET_USER', sysUser) //设置登录用户
                //更新菜单
                this.$store.commit('DoUpdateMenu', hasPermissions);
                //跳转到首页
                this.$router.push({
                  name: "home_index"
                });
              }
            }
            this.loading = false;
          });
        }
      });
    }
  }
};
</script>
